<template>
    <div>
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in newslist" :key='item.id'>
					<router-link :to="'/home/newsinfo/' + item.id">
						<img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							<h1>{{item.title}}</h1>
							<p class="mui-ellipsis">
                                <span>发表时间：{{item.add_time | dateFormat}}</span>
                                <span>点击：{{item.click}}次</span>

                            </p>
						</div>
					</router-link>
				</li>
			</ul>
    </div>
</template>
<script>
import {Toast} from "mint-ui"
export default {
		data(){
			return{
				newslist:[],
			}
		},
		created(){
			this.getnewslist()
		},
		methods:{
			getnewslist(){
				this.$http.get("api/getnewslist").then(response=>{
					if(response.body.status === 0){
						this.newslist = response.body.message
						Toast({message:"图文资讯列表ok",duration:500})
					}
					else{
						Toast({message:"图文资讯列表fail",duration:500})
					}
				})
			}
		},
		//私有过滤器，但考虑到全局图文都有时间显示，应该放在全局
		// filters:{
		// 	dateFormat: function(dateStr,value){
		// 		var str = new Date(dateStr*1000)
		// 		var y = str.getFullYear()
		// 		var m = str.getMonth()+1
		// 		var d = str.getDay()
		// 		if(dateStr.toLowerCase == 'yyyy-mm-dd'){
		// 			return `${y}-${m}-${d}`
		// 		}else{
		// 			var h = str.getHours()
		// 			var i = str.getMinutes()
		// 			var s = str.getSeconds()
		// 			return `${y}-${m}-${d} ${h}:${i}:${s}`
		// 		}
		// 	}
		// }
	}
</script>
<style lang="scss" scoped>
.mui-table-view .mui-media-object {

    width: 42px;
}
.mui-media-body{
    h1{
        font-size:14px;
    }
    .mui-ellipsis{
        font-size:13px;
        color:cornflowerblue;
        display:flex;
        justify-content:space-between;

    }

}
</style>